In this article, I’m explaining about Bootstrap Glyph icons
Firstly install Bootstrap package from Manage NuGet Packages in your project.
After installing Bootstrap package use these three files in your project
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
How to Use Glyph icons:-
All glyph icons require a base class and separate icon class here is a lot of icons class
these icons class are meaning full. Be sure to leave a space between the icon and
text.
Example
<div class="container" style="width: 50%;">
<div class="well">
<div class="row">
<div class="col-md-4">
<label>First Name</label>
</div>
<div class="col-md-8">
<input type="text" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<label>Last Name</label>
</div>
<div class="col-md-8">
<input type="text" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<label>Email ID</label>
</div>
<div class="col-md-8">
<input type="text" />
</div>
</div>
<br />
<div class="row">
<div class="col-md-4">
<label>Country</label>
</div>
<div class="col-md-8">
<select>
<option>India</option>
<option>USA</option>
<option>South Africa</option>
</select>
</div>
</div>
<br />
<div class="row">
<div class="col-md-offset-4 col-md-8 text-right">
<button type="button" class="btn btn-success">
<span class="glyphicon glyphicon-saved"></span>Save
</button>
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-trash"></span>Delete
</button>
<button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-remove-sign"></span>Clear
</button>
</div>
</div>
</div>
</div>
Here is glyph icons base class glyphicon and seprate icon class glyphicon-
saved. whole syntax for make glyph icons <span class="glyphicon glyphicon-
remove-sign"></span>.
Output
If you want to full implementation of bootstrap components click here
Candido Reyes
09-Sep-2016